<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-09-24 15:36:25
 * @LastEditors: younghxp
 * @LastEditTime: 2021-10-18 13:53:43
-->
<template>
  <div :class="isFull ? 'frameScreen full' : 'frameScreen'">
    <div class="icon" @click="handleFull">
      <img :src="require('@/assets/ylChart/fullIcon.png')" alt="" />
    </div>
    <iframe
      ref="newScreen"
      @load="sendMessage"
      :src="url"
      id="iframeScreen"
      frameborder="0"
      allowfullscreen
      scrolling="no"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'newIndex',
  data() {
    return {
      // url: 'https://yc-sgms.btzh.net:4443/yc-wage-payment-supervision-web/#/dataSummary',
      url: 'http://219.139.130.122:7004/yc-wage-payment-supervision-web/#/dataSummary',
      isFull: false,
    }
  },
  // beforeRouteEnter(to, from, next) {
  //     if (from.path === '/login/loginNext') {
  //         next(vm => {
  //             vm.isFull = true
  //         })
  //     } else {
  //         next()
  //     }
  // },
  mounted() {
    if (this.$route.query.fromPath === 'login') {
      this.isFull = true
    } else {
      this.isFull = false
    }
    window.addEventListener('message', this.handleMessage)
    this.iframeWin = this.$refs.newScreen.contentWindow
  },
  methods: {
    handleMessage(event) {
      const { path, oldUrl, query } = event.data
      this.$router.push({
        path,
        query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    sendMessage() {
      this.iframeWin.postMessage(
        {
          token: localStorage.getItem('access_token'), //鉴权token
          areaId: this.$store.state.currentAreaId, //区域id
        },
        '*'
      )
    },
    handleFull() {
      this.isFull = !this.isFull
    },
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy(true)
    next()
  },
  destroyed() {
    window.removeEventListener('message', this.handleMessage)
  },
}
</script>

<style lang="less" scope>
.frameScreen {
  .icon {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 99999999;
    img {
      cursor: pointer;
      display: block;
      width: 25px;
      height: 25px;
    }
  }
  #iframeScreen {
    width: 100%;
    height: 100%;
  }
}
.containerRouterView.containerRouterViewWrap.full {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  z-index: 2021;
}
</style>
